<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>
<template>
  <div :class="isAdmin == 1?'entryStaffIndex':'entryStaffIndex entryStaffIndexSmore'">
    <div class="sta_title_entry">
      <div class="goBack" @click="saveEntry">
        <Icon type="ios-arrow-back"/>
        <span class="gb_font">返回</span>
      </div>
      <div class="st_font">
        <span :class="entryData.chooseIndex != 0?'stf_up':'stf_up cantClick'" @click="lastItem">上一项</span>
        <span class="stf_title">7月16日 {{entryData.dataList[entryData.chooseIndex].title}}</span>
        <span :class="entryData.chooseIndex != entryData.dataList.length - 1?'stf_down':'stf_down cantClick'"
              @click="nextItem">下一项</span>
      </div>
      <div class="st_button">
        <Icon type="md-menu"/>
      </div>
    </div>
    <div class="content">
      <div class="place">
        <div class="place_title">{{entryData.dataList[entryData.chooseIndex].title}}</div>
        <div class="place_input" v-if="entryData.dataList[entryData.chooseIndex].datetype == 'select'">
          <Select v-model="selectValue">
            <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </div>
        <div class="place_input" v-if="entryData.dataList[entryData.chooseIndex].datetype == 'int'">
          <InputNumber :max="10000" :min="0" v-model="entryData.dataList[entryData.chooseIndex].confirm_value"
                       :placeholder="entryData.dataList[entryData.chooseIndex].require_msg"></InputNumber>
        </div>
        <div class="place_radio" v-if="entryData.dataList[entryData.chooseIndex].datetype == 'bool'">
          <div class="pr_radio prrOne"
               :class="entryData.dataList[entryData.chooseIndex].confirm_value == -1?'prrOne_click':''"
               @click="radioClick(-1)">NG
          </div>
          <div class="pr_radio prrTwo"
               :class="entryData.dataList[entryData.chooseIndex].confirm_value == 1?'prrTwo_click':''"
               @click="radioClick(1)">OK
          </div>
        </div>
      </div>
      <!-- 富文本框 -->
      <div class="richText">
        <div id="wangeditor">
          <div ref="editorElem" style="text-align:left"></div>
        </div>
      </div>
      <!-- 说明 -->
      <div class="explain">
        <div class="explain_title">填写说明</div>
        <div class="explain_content" v-html="notesCompile(entryData.dataList[entryData.chooseIndex].notes)"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import cookie from 'js-cookie';
  import E from 'wangeditor'

  export default {
    props: ['entryData'],
    name: 'entryForStaff',
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        selectList: [
          {
            value: 'New York',
            label: 'New York'
          },
          {
            value: 'London',
            label: 'London'
          },
        ],
        selectValue: '',
        okng: '',
        isAdmin: cookie.get('isAdmin'),
        editor: null,
      };
    },
    created() {
      window.document.title = 'SCS';
    },
    mounted() {
      let self = this
      this.createdEditor()
      self.editor.create()
      self.editor.txt.html(this.entryData.dataList[this.entryData.chooseIndex].cont)
    },
    methods: {
      saveEntry() {
        let data = {
          list: this.entryData.dataList,
          ymd: this.entryData.chooseDate,
          uid: cookie.get('uid'),
          unit_id: this.entryData.unit_id,
        };
        this.$emit('saveEntry', data)
      },
      lastItem() {
        let self = this
        if (self.entryData.chooseIndex != 0) {
          self.entryData.chooseIndex = self.entryData.chooseIndex - 1
        }
        self.editor.txt.html(this.entryData.dataList[this.entryData.chooseIndex].cont)
        document.getElementById(self.editor.textElemId).blur()
        // this.createdEditor()
      },
      nextItem() {
        let self = this
        if (self.entryData.chooseIndex != self.entryData.dataList.length - 1) {
          self.entryData.chooseIndex = self.entryData.chooseIndex + 1
        }
        self.editor.txt.html(this.entryData.dataList[this.entryData.chooseIndex].cont)
        document.getElementById(self.editor.textElemId).blur()
        // this.createdEditor()
      },
      notesCompile(html) {
        let self = this
        if (html == '' || html == null || html == undefined) {
          return '无'
        } else {
          return html
        }
      },
      createdEditor() {
        var editor = new E(this.$refs.editorElem)        //创建富文本实例
        this.editor = editor
        editor.customConfig.onchange = (html) => {
          this.entryData.dataList[this.entryData.chooseIndex].cont = html
        }
        editor.customConfig.uploadImgServer = 'http://file.scs.cqapps.net/upload.php'
        editor.customConfig.uploadFileName = 'upload_file'
        editor.customConfig.menus = [          //菜单配置
          'image',  // 插入图片
          'video',  // 插入视频
          'list',  // 列表
          'justify',  // 对齐方式
          'link',  // 插入链接
        ]
        editor.customConfig.uploadImgParams = {
          server: 'item',
          from: 'wangeditor',
          domain: 'scs.cqapps.net'
        }
        //下面是最重要的的方法
        editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
          },
          success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            this.imgUrl = Object.values(result.data).toString()
          },
          fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          },
          error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },
          timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },

          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
          customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let url = Object.values(result.data)      //result.data就是服务器返回的图片名字和链接
            JSON.stringify(url)    //在这里转成JSON格式
            insertImg(url)
            // result 必须是一个 JSON 格式字符串！！！否则报错
          }
        }
        // editor.create()
        // editor.txt.clear()
        // editor.txt.html(this.entryData.dataList[this.entryData.chooseIndex].cont)
      },
      radioClick(val) {
        let self = this
        self.okng = val
        self.entryData.dataList[self.entryData.chooseIndex].confirm_value = val
        if (val == 1) {
          self.entryData.dataList[self.entryData.chooseIndex].status = 'OK'
          self.nextItem()
        } else {
          self.entryData.dataList[self.entryData.chooseIndex].status = 'NG'
        }
      },
    },
  }
</script>
<style lang="less">
  .entryStaffIndex {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    opacity: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 9;
    .sta_title_entry {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon {
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font {
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font {
        display: flex;
        flex-direction: row;
        max-width: 80%;
        margin-top: auto;
        margin-bottom: auto;
        height: 37px;
        .stf_title {
          max-width: 66%;
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
          height: 37px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .stf_up, .stf_down {
          font-size: 17px;
          color: #3f8fe0;
          cursor: pointer;
        }
        .cantClick {
          color: #878b91;
          cursor: not-allowed;
        }
      }
      .st_button {
        position: absolute;
        right: 0;
        top: 4px;
        width: 38px;
        height: 28px;
        line-height: 27px;
        text-align: center;
        background: #e8e8e8;
        border-radius: 20px;
        cursor: pointer;
        .ivu-icon {
          color: #666666;
          font-size: 20px;
        }
      }
      .st_button:hover {
        .ivu-icon {
          color: #57a3f3;
          transition: color .2s ease;
        }
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      background: #f4f4f4;
      .place {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        .place_title {
          font-size: 15px;
          color: #222222;
          margin-bottom: 16px;
        }
        .place_input {
          width: 330px;
          height: 36px;
          .ivu-select {
            width: 100%;
            height: 100%;
            line-height: 36px;
            font-size: 16px;
          }
          .ivu-input-number {
            width: 100%;
            height: 100%;
            line-height: 36px;
            font-size: 16px;
            .ivu-input-number-handler {
              height: 18px;
              .ivu-input-number-handler-down-inner, .ivu-input-number-handler-up-inner {
                line-height: 18px;
              }
            }
          }
          .ivu-date-picker {
            width: 100%;
            height: 100%;
            .ivu-date-picker-rel {
              width: 100%;
              height: 100%;
              .ivu-input-wrapper {
                width: 100%;
                height: 100%;
                .ivu-input-icon {
                  width: 36px;
                  height: 36px;
                  line-height: 36px;
                }
                .ivu-input-icon-normal + .ivu-input {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
        .place_radio {
          display: flex;
          flex-direction: row;
          justify-content: center;
          position: relative;
          .pr_radio {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 1px solid #e5e5e5;
            text-align: center;
            line-height: 150px;
            font-size: 30px;
            cursor: pointer;
          }
          .prrOne {
            background: #fff;
            color: #f15c60;
            margin-right: 100px;
          }
          .prrOne_click {
            background: #f15c60;
            color: #fff;
          }
          .prrTwo {
            background: #fff;
            color: #5fba53;
          }
          .prrTwo_click {
            background: #5fba53;
            color: #fff;
          }
        }
      }
      .richText {
        width: 100%;
        height: 340px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        margin-bottom: 16px;
      }
      .explain {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 4px;
        .explain_title {
          width: 100%;
          font-size: 14px;
          color: #222222;
          padding: 16px;
          box-sizing: border-box;
          border: 1px solid #e5e5e5;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
        }
        .explain_content {
          width: 100%;
          font-size: 15px;
          color: #222222;
          border: 1px solid #e5e5e5;
          border-top: none;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
        }
        p {
          background: #fff;
          padding: 16px;
          box-sizing: border-box;
        }
      }
    }
  }
  .entryStaffIndexSmore {
    width: 100%;
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .entryStaffIndex{
      width: 100%;
      .sta_title_entry{
        margin: 8px 0 !important;
        .goBack{
          .gb_font{
            font-size: 14px !important;
          }
        }
        .st_font{
          width: 65%;
          .stf_title{
            max-width: 45% !important;
            font-size: 14px !important;
            margin-left: 5px !important;
            margin-right: 5px !important;
          }
          .stf_up,.stf_down{
            font-size: 14px !important;
          }
        }
      }
      .content{
        .place{
          padding: 8px !important;
          .place_title{
            font-size: 14px !important;
            margin-bottom: 8px;
          }
          .place_input{
            width: 100%;
            input{
              font-size: 14px !important;
            }
          }
        }
        .richText{
          margin-bottom: 8px !important;
        }
        .explain{
          .explain_title{
            font-size: 14px !important;
            padding: 8px !important;
          }
          .explain_content{
            p{
              font-size: 14px !important;
              padding: 8px !important;
            }
          }
        }
      }
    }
  }
</style>